<template>
    <div class="mobilephone">
        <div class="mian">
            <img src="../../common/image/change_phone.png" alt="">
            <p><span>您的手机号码：</span><span>{{phonenum}}</span></p>
            <button type="button" @click="phone">更换手机号码</button>
        </div>
        <van-dialog v-model="show" show-cancel-button :before-close="beforeClose" title="为了您的账户安全，请输入登录密码">
          <van-field v-model="password" type="password"  placeholder="请输入密码" />
          <p class="tishi" v-show="active">请填写正确的密码</p>
        </van-dialog>
    </div>
</template>

<script>
    import { MessageBox ,Toast} from 'mint-ui';
    import { RequestGet,RequestPost} from '@/api/http.js'
    export default {
        data(){
          return{
              uid: '',
              phonenum: '',
              confirm: false,
              show: false,
              active: false,
              password: ''
          }
        },
        component:{
            MessageBox,
            Toast
        },
        methods:{
            back(){
                this.$router.go(-1);
            },
            beforeClose(action, done) {
              if (action === 'confirm') {
                if(this.password == ''){
                  this.active = true;
                  done(false);
                }else {
                  done(false);
                  this.active = false;
                  RequestPost({url:'/user/login',data: {'id': this.uid,'password':this.password}}).then((respones)=>{
                    if(respones.data.code == 1){
                      Toast(respones.data.msg);
                      setTimeout(()=>{
                        this.$router.push('/phone_validate?uid=' + this.uid);
                      }, 1200)
                    }else{
                      Toast(respones.data.msg);
                    }
                  })
                }
              } else {
                done();
                this.active = false;
              }
            },
            phone(){
                this.show = true;
            }
        },
        watch: {
          '$route': function (n, o) {
            this.uid = n.query.uid;
            this.phonenum = n.query.phone;
          }
        },
        mounted () {
          let self = this;
          self.uid = self.$route.query.uid;
          self.phonenum = self.$route.query.phone;
        }
    }
</script>

<style lang="scss" scoped>
    .mobilephone{
        text-align: center;
        .mian{
            margin: 20% 0;
            p{margin: 20px 0;font-size: 30px;}
            img{width: 40%;}
            button{
                color: #fff;
                background: #557ae4;
                width: 70%;
                height: 80px;
                line-height: 80px;
                border: none;
                border-radius: 5px;
                font-size: 30px;
                margin-top: 30px;
            }
        }
    }
</style>
<style>
    .van-cell__value{width: 100%;border-bottom: none;}
    .mint-msgbox .mint-msgbox-header{
        padding: 0.8rem 0!important;
        font-size: 30px;
    }
    .mint-msgbox-title{
        font-size: 38px;
    }
    .mint-msgbox-message{
        line-height: 0.48rem!important;
        font-size: 30px;
    }
    .mint-msgbox-input input{
        height: 80px;
        width: 87%;
        margin-left: 6%;
        font-size: 30px;
        border: 0.02rem solid #303030!important;
        text-indent: 30px;
    }
    .mint-msgbox-btns{
        height: 1.33333rem!important;
    }
    .mint-msgbox-btns button{
        font-size: 30px;
    }
    .mint-msgbox-errormsg{
        padding-left:6%;
        font-size: 26px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .van-dialog__footer{ border-top: 1px solid gainsboro;}
    .van-cell__title span{font-size: 30px;}
    .van-field__body{border-bottom: none!important;}
    .van-field__control{padding: 16px 0;text-align: center;font-size: 30px;border: 0.025rem solid gray;margin: 30px 30px 10px 30px;border-radius: 10px;background: none}
    .van-dialog__header{font-size: 34px;border-bottom: 1px solid gainsboro;padding-bottom: 30px;}
    .tishi{font-size: 26px; margin: 12px 0 30px 0;color: red;text-align: left;margin-left: 50px;}
</style>
